<template>
	<view class="detailplay">
		<uni-nav-bar :title="title" leftIcon="icon-fanhui" rightIcon="true" @clickLeft="$back()">
		</uni-nav-bar>
    <view class="play">
      <video class="video-class" id="videoControl" :src="videoUrl"  controls :autoplay="true" @error="error"></video>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'',
        videoUrl:''
			}
		},
    onLoad(option) {
      this.title=option.title
      this.videoUrl=encodeURI(option.videoUrl)
      console.log(this.videoUrl)
    },
    mounted() {
    const videoData = uni.getStorageSync(this.$md5(this.videoUrl))
    // 判断是否有缓存  
    if(videoData){  
        console.log('我是视频-有缓存')  
        this.videoUrl = videoData  
    }else{  
        console.log('我是视频-没有有缓存')  
        // 下载视频  
        this.$utils.downFile(this.videoUrl,this.$md5);  
    } 
    },
		methods: {
      error(e) {
        if (!this.videoUrl) {
          this.$showToast('视频地址出错')
        }
      
      }
		}
	}
</script>

<style lang="scss">
  .detailplay{
    height: 100%;
    background-color: #000000;
    .play{
      height: calc(100vh - var(--status-bar-height) - 8.6vh);
      width: 100%;
      .video-class{
        width: 100%;
        height: 100%;
      }
    }
  }

</style>
